<template>
  <div>
    <el-table :data="data" border style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        fixed
        align="center"
        prop="id"
        label="用户ID"
        width="200"
      >
      </el-table-column>
      <el-table-column prop="name" align="center" label="用户昵称" width="200">
      </el-table-column>
      <el-table-column
        prop="Phonenumber"
        label="手机号"
        align="center"
        width="200"
      >
      </el-table-column>
      <el-table-column prop="password" label="密码" align="center" width="120">
      </el-table-column>
      <el-table-column
        prop="record"
        label="购买记录"
        align="center"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="time"
        label="上次购买时间"
        align="center"
        width="200"
      >
      </el-table-column>
      <el-table-column prop="zip" label="账户禁用" align="center" width="200">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.switch"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
            ></el-switch
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="left" label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="textClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="small"
            v-if="ind === 0"
            >删除</el-button
          >
          <el-button
            @click="huifuClick(scope.row)"
            type="text"
            size="small"
            v-if="ind === 1"
            >恢复</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <p class="prim">
        姓名:<input
          type="text"
          class="mary"
          placeholder="请输入用户名"
          v-model="name"
        />
      </p>
      <p class="prim">
        手机号:<input
          type="text"
          placeholder="请输入手机号"
          v-model="cellphone"
        />
      </p>
      <p class="prim">
        密码:<input
          type="password"
          class="mary"
          placeholder="请输入密码"
          v-model="password"
        />
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ible()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVi" width="30%">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ble()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { store } from "../../store/index";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("vip");
export default {
  data() {
    return {
      ind:0,
      dialogVisible: false, //添加会员弹框
      dialogVi: false, //编辑会员弹框
      data: [],
      dataList: [],
       name: "", //添加姓名
      cellphone: "", //添加手机号
      password: "", //添加密码
    };
  },
  created() {
    this.data = this.vipdata;
    this.dataList = this.data.filter((item) => item.situation === 0);
  },
  computed: {
    ...mapState({
      vipdata: (state) => state.vipdata,
    }),
  },
  methods: {
    //删除会员
    handleClick(i) {
      this.dataList.forEach((item, index) => {
        if (item == i) {
          let att = this.dataList.splice(index, 1);
          item.situation = 1;
        }
      });
    },
    //恢复会员
    huifuClick(i) {
      this.dataList.forEach((item, index) => {
        if (item == i) {
          this.dataList.splice(index, 1);
          item.situation = 0;
        }
      });
    },
       //编辑
    textClick(u) {
      this.dialogVi = true;
      console.log(u);
    },
    //取消编辑
    ble() {
      this.dialogVi = false;
    },
  },
};
</script>

<style scoped>
.el-button+.el-button {
    margin-left: 60px;
}
</style>